<template lang="html">
  <div class="wrapper m-box-model">
    <div class="header">
      头部
    </div>
    <div class="content m-box-model m-flex-shrink1 m-flex-grow1">
      <textarea ref="textarea" class="textarea" placeholder="请输入" @input="input($event)" @keyup="input($event)"></textarea>
    </div>
    <div class="footer m-box-model" ref="footer">
      <a class="btn" @click="submit()">确定</a>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  methods: {
    submit () {

    },
    input (event) {
      var textarea = event.currentTarget;
      // 自动增加高度
      $(textarea).css({'height': 'auto'})
        .animate({'height': textarea.scrollHeight}, 0);
    },
    setPosition () {
      var winHeight = $(window).height();
      var footerHeight = $(this.$refs.footer).height();
      console.log(winHeight, footerHeight);
      var height = winHeight - footerHeight;
      $(".content").css({height: height});
    }
  },
  mounted () {
    // setTimeout(() => {
    //   this.setPosition();
    // }, 2000);
    // $(window).on("resize", () => {
    //   this.setPosition();
    // });
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.m-box-model {
  align-items: stretch;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: flex-start;
  position: relative;
}
.m-pos-r {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.m-reles-nr {
  border-radius: .35rem;
  overflow: hidden;
}
.m-fd-row,
.m-fdr-jcsbet {
  flex-direction: row;
}
.m-flex-grow1 {
  flex-grow: 1;
}
.m-flex-shrink1 {
  flex-shrink: 1;
}
.m-lim-width {
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
}
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #e5e5e5;
  box-sizing: border-box;
}
.header {
  font-size: px2rem(32);
  line-height: px2rem(50);
  text-align: center;
  padding: px2rem(20) 0;
  background-color: $white;
}
.content {
  width: 100%;
  padding: 0 px2rem(30);
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: $white;
  flex-shrink: 1;
}
.textarea {
  width: 100%;
  min-height: px2rem(100);
  outline: 0;
  border: none;
  resize: none;
  font-size: px2rem(32);
  line-height: px2rem(53);
  color: $default;
}
.footer {
  width: 100%;
  background-color: white;
  height: px2rem(100);
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    width: px2rem(80);
    height: px2rem(60);
    display: flex;
    justify-content: center;
    align-items: center;
    color: $white;
    background-color: $blue;
    border-radius: 5px;
  }
}
</style>
